<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div id="main" style="width: 750px; height:400px "></div>
    </el-card>
  </div>
</template>

<script>
import  _ from 'lodash';
import * as echarts from 'echarts';
export default {
  data(){
    return{
    }
  },
 async mounted(){ 
  var myChart = echarts.init(document.getElementById('main'));
  let option = {
  title: {
    text: '用户来源'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  
  
};

  let ret=await this.$http.get('reports/type/1');
  console.log(ret);
    // let a={...option,...ret.data}
    // myChart.setOption(a);
    const result=_.merge(ret.data,option)
    myChart.setOption(result);
  },//生命周期
  methods:{

   
  },
  
} 
</script>

<style lang="less" scoped>
#main{
   background-color: black;
}
</style>